<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
          margin: 0px;
        }
    
        .div1 {
          position: absolute;
          width: 100px;
          height: 100px;
          top: 50px;
          left: 300px;
          background: red;
        }
    </style>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1. 逐渐扩大
          1). 宽/高都扩为200px
          2). 宽先扩为200px, 高后扩为200px
        2. 移动到指定位置
          1).移动到(500, 100)处
          2).移动到(100, 20)处
        3.移动指定的距离
          1). 移动距离为(100, 50)
          2). 移动距离为(-100, -20)
        4. 停止动画
        */
        $(function(){
            var $div_div1=$("div.div1");
            //1. 逐渐扩大 1). 宽/高都扩为200px; 2). 宽先扩为200px, 高后扩为200px
            var $button_btn1=$(":button#btn1");
            $button_btn1.click(function(){
                /*
                $div_div1.animate({
                    width:200,
                    height:200
                },2000)
                */
                $div_div1.animate({
                    width:200
                },1000).animate({
                    width:300,
                    height:300
                },1000)
            })

            //2. 移动到指定位置 1).移动到(500, 100)处; 2).移动到(100, 20)处
            var $button_btn2=$(":button#btn2");
            $button_btn2.click(function(){
                $div_div1.animate({
                    left:500,
                    top:100,
                },1000)
            })

            //3.移动指定的距离 1). 移动距离为(100, 50) 2). 移动距离为(-100, -20)
            var $button_btn3=$(":button#btn3");
            $button_btn3.click(function(){
                $div_div1.animate({
                    /*
                    left:"+=100",
                    top:"+=50"
                    */
                    left:"-=100",
                    top:"-=20"
                },5000)
            })

            //4. 停止动画
            var $button_btn4=$(":button#btn4");
            $button_btn4.click(function(){
                $div_div1.stop();
            })
        })
    </script>
</head>
<body>
    <button id="btn1">逐渐扩大</button>
    <button id="btn2">移动到指定位置</button>
    <button id="btn3">移动指定距离</button>
    <button id="btn4">停止动画</button>
    <div class="div1">
        爱在西元前，学在尚硅谷
    </div>
    <!--
        jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
        1. animate(): 自定义动画效果的动画
        2. stop(): 停止动画
    -->
</body>
</html>